<template>
  <div
    class="detail-box demo-image__error cell-44"
    :class="{ 'is-1-column': column == 1 }"
  >
    <template v-for="(item, index) in descList" :key="'descList' + index">
      <el-descriptions
        :border="item.border || true"
        :title="item.title || ''"
        class="mb20"
        :column="item.column || 2"
        labelClassName="custom-label"
        ClassName="custom-content"
        :size="item.size || 'default'"
      >
        <template
          v-for="(descKey, innerIndex) in item.keyArr"
          :key="innerIndex + 'desc'"
        >
          <el-descriptions-item :span="descKey.span || 1">
            <template #label v-if="descKey.label">
              <i class="el-icon-user" v-if="item.icon"></i>
              <template v-if="typeof descKey.label == 'function'">
                {{ descKey.label(data) }}
              </template>
              <template v-else>
                {{ descKey.label }}
              </template>
            </template>
            <!-- 图片 -->
            <div class="cell" v-if="descKey.detailType == 'image'">
              <el-image
                style="width: 44px; height: 44px"
                :src="data[descKey.keyName] || ''"
                :preview-src-list="
                  data[descKey.keyName] ? [data[descKey.keyName]] : []
                "
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <!-- formatter 转换  -->
            <div
              v-else-if="descKey.formatter"
              v-html="descKey.formatter(data)"
            ></div>
            <!-- 数组对象、或数组 -->
            <template v-else-if="Array.isArray(data[descKey.keyName])">
              <el-tag
                v-for="(innerItem, innerI) in data[descKey.keyName]"
                :key="'tag' + innerI"
                size="small"
                class="mr10 mb10"
              >
                {{
                  (descKey.innerKey
                    ? innerItem[descKey.innerKey]
                    : innerItem) || "--"
                }}
              </el-tag>
            </template>
            <template
              v-else-if="
                typeof data[descKey.keyName] === 'object' &&
                data[descKey.keyName] !== null
              "
            >
              <div v-if="Object.keys(data[descKey.keyName]).length > 0">
                <div v-for="(value, key) in data[descKey.keyName]" :key="key">
                  <span>{{ key }}: </span>
                  <span v-if="typeof value === 'object'">{{
                    JSON.stringify(value)
                  }}</span>
                  <span v-else>{{ value }}</span>
                </div>
              </div>
              <div v-else>
                <!-- 对象为空时的默认显示 -->
                <span>--</span>
              </div>
            </template>

            <!-- 默认键值对 -->
            <span
              v-else-if="
                (data[descKey.keyName] || data[descKey.keyName] === 0) &&
                typeof data[descKey.keyName] !== 'object'
              "
            >
              {{
                data[descKey.keyName] || data[descKey.keyName] == 0
                  ? data[descKey.keyName]
                  : "--"
              }}
            </span>
            <!-- 没有值 -->

            <span v-else>--</span>

            <!-- 对象?后期补充 -->
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </template>
    <slot name="footer"></slot>
  </div>
</template>

<script setup>
defineProps({
  column: {
    type: Number,
    default: 2,
  },
  descList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
</script>

<style lang="scss">
.detail-box {
  width: 100%;
}
.detail-box .custom-label {
  width: 25% !important;
}
.detail-box .custom-content {
  width: 25% !important;
}
.is-1-column {
  &.detail-box .custom-content {
    width: auto !important;
  }
}
.demo-image__error .image-slot,
.demo-image__placeholder .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 14px;
}
.detail-box.cell-44 {
  .cell {
    height: 44px !important;
    line-height: 44px !important;
  }
}
</style>
